<template>
  <section>
    <div style="text-align:center; backgroundColor: #fff;">
      <!-- tabs工具条 -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="商户流水列表" name="first">
          <el-form
            :model="numberValidateForm"
            ref="numberValidateForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-row>
              <el-col :span="6">
              <!-- <el-form-item label="商户ID:" prop="merchantId">
                <el-input v-model="numberValidateForm.merchantId"></el-input>
              </el-form-item> -->
              </el-col>
              <el-col :span="6">
              <!-- <el-form-item label="流水号:" prop="turnoverNo">
                <el-input v-model="numberValidateForm.turnoverNo"></el-input>
              </el-form-item> -->
              </el-col>
              <el-col :span="5">
              <el-form-item label="业务类型:" prop="businessType">
                <el-select
                  placeholder="全部"
                  clearable
                  v-model="numberValidateForm.businessType"
                  class="project"
                >
                  <el-option
                    v-for="item in region"
                    :label="item.name"
                    :key="item.code"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="5">
              <!-- <el-form-item label="操作类型:" prop="handleType">
                <el-select
                  placeholder="全部"
                  clearable
                  v-model="numberValidateForm.handleType"
                  class="project"
                >
                  <el-option
                    v-for="item in handleType"
                    :label="item.name"
                    :key="item.code"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item> -->
              </el-col>
             <el-col :span="12">
              <el-form-item label="时间段:">
                <el-date-picker
                  v-model="numberValidateForm.startTime"
                  type="datetime"
                  :editable="false"
                  placeholder="选择开始日期"
                  value-format = "yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                ></el-date-picker>~
                <el-date-picker
                  v-model="numberValidateForm.endTime"
                  type="datetime"
                  :editable="false"
                  placeholder="选择结束日期"
                  value-format = "yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  @change="start"
                ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item>
                <el-button type="primary" class="checkBtn" @click="search()">查询</el-button>  
                </el-form-item>
                </el-col> 
                <el-col :span="2">
                <el-form-item>    
                <el-button type="danger" class="checkBtn" @click="exportToExcel">导出</el-button>
              </el-form-item>
              </el-col> 
            </el-row>
          </el-form>
          <template>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column type="index" align="center"></el-table-column>
              <el-table-column prop="merchantId" label="商户ID" align="center" width="150"></el-table-column>
              <el-table-column prop="turnoverNo" label="流水号" align="center" width="280"></el-table-column>
              <el-table-column prop="businessType" align="center" label="业务类型" width="120">
                  <template slot-scope="scope">
                      {{getbusinessType(scope.row.businessType)}}
                  </template> 
              </el-table-column>
              <el-table-column prop="currency" label="币种" align="center" width="120"></el-table-column>
              <el-table-column prop="beginMoney" label="起始资金" align="center" width="180"></el-table-column>
              <el-table-column prop="changeMoney" label="变动资金" align="center" width="120"></el-table-column>
              <el-table-column prop="money" label="余额" align="center" width="120"></el-table-column>
              <el-table-column prop="status" label="状态" align="center" width="120"></el-table-column>
              <el-table-column prop="handleType" label="操作类型" align="center" width="120">
                  <template slot-scope="scope">
                      {{gethandleType(scope.row.businessType)}}
                  </template> 
              </el-table-column>
              <el-table-column prop="handleUser" label="操作者" align="center" width="120"></el-table-column>
              <el-table-column prop="turnoverTime" label="时间" align="center" width="180"></el-table-column>
              <el-table-column prop="remark" label="备注" align="center" width="120"></el-table-column> 
            </el-table>
            <div class="block">
            <el-pagination
              background
              @size-change="pageSizeChange"
              @current-change="pageIndexChange"
              :current-page="pageIndex"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal"
            ></el-pagination>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <transition name="el-fade-in-linear">
          <div class="spin-container" v-if="gridLoading">
            <div class="spin1">
              <div class="spin2">
              </div>
                <div class="spin3">
              </div>
            </div>
          </div>
    </transition>
  </section>
</template>
<script>
import enums from '../../common/Enum';
import DataUtil from "../../common/dataUtil";
import { getMerchantFlow } from "@/api/index.js";

export default {
  data() {
    return {
      pickerOptions :{
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
      },
      numberValidateForm: {
        merchantId: "",
        turnoverNo: "",
        businessType : '',
        handleType : '',
        startTime: DataUtil.formatUnixDateMin(new Date()),
        endTime: DataUtil.formatUnixDateMax(new Date())
      },
      gridLoading: false,
      activeName: "first",
      pageIndex: this.$store.getters.getOrderListAllIndex,
      pageSize: 10,
      dataTotal: 0,
      labelPosition: "right",
      region: enums.busType,
      handleType : enums.handleType,
      tableData : [],
    };
  },
  methods: {
    pageIndexChange(val) {
				this.pageIndex = val;
				this.$store.dispatch('setOrderListAllIndex', val)
				this.search();
    },
    pageSizeChange(val) {
    },
    search() {
      this.bindGrid();
    },
    getbusinessType(type){
      return enums.getbusType(type);
    },
    gethandleType(type){
      return enums.gethandleType(type);
    },
    end(e){
      this.numberValidateForm.startTime = e;
    },
    start(e){
      this.numberValidateForm.endTime = e;
    },
    //////获取列表
    bindGrid() {
      if( this.numberValidateForm.startTime && this.numberValidateForm.endTime){ 
          if(this.numberValidateForm.startTime > this.numberValidateForm.endTime){
              this.$message.error("开始时间不能大于结束时间！");
              return
          }
      }else{
        this.numberValidateForm.startTime = '';
        this.numberValidateForm.endTime = '';
      }
      this.gridLoading = true;
      const formData = new FormData();
      formData.append('pageNum',this.pageIndex);
      formData.append('merchantId',JSON.parse(DataUtil.userInfo()).id);
      // formData.append('turnoverNo',this.numberValidateForm.turnoverNo);
      formData.append('businessType',this.numberValidateForm.businessType);
      // formData.append('handleType',this.numberValidateForm.handleType);
      formData.append('minTime',this.numberValidateForm.startTime);
      formData.append('maxTime',this.numberValidateForm.endTime);
      getMerchantFlow(formData).then(response => {
        if ('01001' == response.status) {
          this.gridLoading = false;
            this.tableData = response.data.dataList;
            this.dataTotal = response.data.page.recordCount;
            // formData.delete("pageNum");
            // formData.delete("merchantId");
            // // formData.delete("turnoverNo");
            // formData.delete("businessType");
            // // formData.delete("handleType");
            // formData.delete("minTime");
            // formData.delete("maxTime");
          }else {
            this.gridData = [];
            this.dataTotal = 0;
            // formData.delete("pageNum");
            // formData.delete("merchantId");
            // // formData.delete("turnoverNo");
            // formData.delete("businessType");
            // // formData.delete("handleType");
            // formData.delete("minTime");
            // formData.delete("maxTime");
          this.$message.error(response.msg);
        }
      }, response => {
        this.gridLoading = false;
      });
    },
    //////导出
    exportToExcel() {
        //excel数据导出
        require.ensure([], () => {
            const {
                export_json_to_excel
            } = require('../../assets/js/Export2Excel');
            const tHeader = ['商户ID','流水号', '业务类型', '币种', '起始资金','变动资金', '余额', '状态','操作类型','操作者','时间','备注'];
            const filterVal = ['merchantId','turnoverNo', 'businessType', 'currency', 'beginMoney','changeMoney', 'money', 
            'status', 'handleType','handleUser','turnoverTime','remarks'];
            const list = this.tableData;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, '商户资产流水表');
        })
    },
    ////////excel数据格式化
    formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
    }
  },
  mounted: function() {
      this.pageIndex = 1;
      this.bindGrid();
  },
};
</script>
<style>
.blur {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10%;
  margin-top: 0;
}
.el-pagination {
  display: inline-block;
  width: 80%;
}
.block {
  padding: 10px 0;
}
.spin-container {
    background: rgba(0,0,0,.1)!important;
}
</style>
